import styles from './index.less';
import kls from 'classnames';
import EchartsWrap from '@/components/widgets/EchartsWrap';
import React, { useEffect, useState } from 'react';

const data = [
  {
    title: '已拆迁',
    value: '532',
    // color: '#2FDFD3',
  },
  {
    title: '拆迁中',
    value: '355',
    // color: '#DFA32F',
  },
  {
    title: '未拆迁',
    value: '24',
    // color: '#ffffff',
  },
];

const total = data.reduce((r, { value }) => r + value, 0);

const Chart3 = () => {
  const renderChart = (select, value) => {
    const arr = [];

    data.forEach(sonItem => {
      arr.push({
        name: sonItem.title,
        value: sonItem.value,
        labelLine: {
          show: false,
        },
        itemStyle: {
          color: select === sonItem.title ? 'rgba(19, 194, 194, 1)' : 'RGBA(129, 130, 132, 0.7)',
        },
        emphasis: {
          labelLine: {
            show: false,
          },
        },
      });
    });

    return arr;
  };

  const getAnalysisChartCfg = (data, value) => {
    let options = {
      toolbox: {
        show: false,
      },
      title: [
        {
          text: `{num|${total}} {unit|个}`,
          top: '25%',
          left: '50%',
          subtext: '总计',
          textAlign: 'center',
          textStyle: {
            rich: {
              num: {
                fontSize: 22,
                fontFamily: 'AlibabaPuHuiTi-Bold, AlibabaPuHuiTi',
                fontWeight: 'bold',
                color: '#FFFFFF',
                lineHeight: 30,
                verticalAlign: 'bottom',
              },
              unit: {
                fontSize: 14,
                lineHeight: 30,
                color: '#FFFFFF',
                verticalAlign: 'bottom',
              },
            },
          },
          subtextStyle: {
            fontSize: 12,
            fontFamily: 'AlibabaPuHuiTi-Bold, AlibabaPuHuiTi',
            color: 'rgba(255,255,255,0.6)',
          },
        },
        // {
        //   text: '总计',
        //   top:'55%',
        //   left: '30%'

        // }
      ],
      series: [
        {
          type: 'pie',
          center: ['50%', '50%'],
          radius: ['83%', '95%'],
          hoverAnimation: false,
          data: renderChart(data),
          itemStyle: {
            normal: {
              // borderColor: 'RGBA(26, 29, 31, 1)',
              // borderWidth: 4,
            },
          },
          label: {
            normal: {
              show: false,
            },
          },
        },
        // {
        //   type: 'liquidFill',
        //   radius: '60%',
        //   center: ['50%', '50%'],
        //   data: [0.5], // data个数代表波浪数
        //   backgroundStyle: {
        //     borderWidth: 1,
        //     color: 'rgba(255, 255, 255, 0.0)',
        //   },
        //   label: {
        //     normal: {
        //       show: false,
        //     },
        //   },
        //   color: ['rgba(255, 255, 255, 0.2)'],
        //   outline: {
        //     borderDistance: 0,
        //     itemStyle: {
        //       borderWidth: 1,
        //       borderColor: 'rgba(255, 255, 255, 0.2)',
        //     },
        //   },
        // },
      ],
    };

    return options;
  };
  const [current, setCurrent] = useState('未闭合');
  const [dataOption, setDataOption] = useState(getAnalysisChartCfg('未闭合', 1));

  const renderList = () => {
    return (
      <div className={styles.itemWrap}>
        {data.map(item => {
          return (
            <div
              className={kls(styles.item, { [styles.selected]: current === item.title })}
              key={item.title}
              onClick={() => {
                setCurrent(item.title);
                setDataOption(getAnalysisChartCfg(item.title, item.value));
              }}
            >
              <div className={styles.itemTop}>
                <div className={styles.itemTitle}>
                  {/* <div className={styles.selectedDecorate}></div> */}
                  {item.title}
                </div>
                <div className={styles.itemValue}>{item.value}</div>
              </div>

              <div className={styles.itemBottom}>
                <div className={styles.itemBottomL}></div>
                <div className={styles.itemBottomR}></div>
              </div>
            </div>
          );
        })}
      </div>
    );
  };
  return (
    <div
      className={kls('side-panel2', styles.statusPanel)}
      style={{ position: 'absolute', bottom: 143, left: 24 }}
    >
      <div className="side-panel2-title">征拆情况</div>
      <div className="side-panel2-body" style={{ padding: 16, paddingBottom: 0 }}>
        <div className={styles.box}>
          <div className={styles.boxInner}>
            <EchartsWrap option={dataOption} style={{ width: '140px', height: '140px' }} />

            <div className={styles.wrapRight}>{renderList()}</div>
          </div>
        </div>
      </div>
    </div>
  );
};

let a = () => {
  return '123';
};

export default Chart3;
